<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件代理</title>
</head>
<body>
    <ul id="nav">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>
</body>
<script>
    var li = document.getElementsByTagName('li')

    // li[0].onclick = function(e) {
    //     alert(1)
    // }
    // li[1].onclick = function(e) {
    //     alert(2)
    // }
    // li[2].onclick = function(e) {
    //     alert(3)
    // }
    //事件代理：将事件绑定在父元素上,事件冒泡

    var nav = document.getElementById('nav')
    
    nav.onclick = function(e) {
        //打印事件对象
        console.log(e)
        if(e.target.innerHTML === 'html') {
            alert('html')
        }else if(e.target.innerHTML === 'css') {
            alert('css')
        }else {
            alert('javascript')
        }
    }






</script>
</html>